﻿
<table class="table table-striped table-hover">
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Year</th>
        <th>Repaired</th>
        <th>Details</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
    <tr ng-repeat="car in cars">
        <!--this directive repeats all tags in array-->
        <td ng-hide="editing">{{car.make}}</td>
        <td ng-show="editing"><input type="text" ng-model="car.make" /></td>
        <td ng-hide="editing">{{car.model}}</td>
        <td ng-show="editing"><input type="text" ng-model="car.model" /></td>
        <td ng-hide="editing">{{car.year}}</td>
        <td ng-show="editing"><input type="text" ng-model="car.year" /></td>
        <td ng-hide="editing">{{car.repaired}}</td>
        <td ng-show="editing">
            <select ng-model="car.repaired">
                <option value="true">Repaired</option>
                <option value="false">Not Repaired</option>
            </select>
        </td>
        <td><a href="#/details/{{$index}}" class="btn btn-default">Details</a></td>
        <td ng-hide="editing"><button class="btn btn-info" ng-click="editing='true'">Edit</button></td>
        <td ng-show="editing"><button class="btn btn-success" ng-click="editing='false'">Save</button></td>
        <td><button class="btn btn-danger" ng-click="removeCar(car)">Remove</button></td>
</table>